<template>
  <!-- 产品管理 -->
  <!-- 右侧关联部分 -->
  <article class="right-list">
    <!-- <div class="top">
      <div class="top_title">相关内容</div>
      <div class="picBox">
        <div class="picBox_item" v-for="(i, n) in aboutPic" :key="n">
          <div class="aboutPic">
            <img :src="i.pic" alt="" />
          </div>
          <p>{{ i.text }}</p>
        </div>
      </div>
    </div> -->
    <div class="bottom">
      <div class="bottom_title">热门浏览</div>
      <div class="picBox">
        <div
          v-for="(i, n) in proBrowseList"
          :class="['picBox_item', isactive === n ? 'active' : '']"
          :key="n"
          @click="(e) => jumpBrowse(e, i, n)"
        >
          <div class="hotPic">
            <img :src="i.thumbnail" alt=" " />
          </div>
          <p>{{ i.fileName }}</p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_title bottom_title2">热门下载</div>
      <div class="picBox">
        <div
          :class="['picBox_item', isactive === n + 6 ? 'active' : '']"
          v-for="(i, n) in proList"
          :key="n + 6"
          @click="(e) => jumpDownload(e, i, n + 6)"
        >
          <div class="hotPic">
            <img :src="i.thumbnail" alt=" " />
          </div>
          <p>{{ i.fileName }}</p>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
import pic from "@/assets/common/20.png";

export default {
  name: "list",
  props: {
    hotPic: {
      type: Array,
    },
    browseList: {
      type: Array,
    },
    getSelectItem: {
      type: Function,
    },
  },
  updated() {
    console.log(this.hotPic, this.browseList);
  },
  computed: {
    proList() {
      if (this.hotPic.length <= 6) {
        return this.hotPic;
      } else {
        return this.hotPic.slice(0, 6);
      }
    },
    proBrowseList() {
      if (this.browseList.length <= 6) {
        return this.browseList;
      } else {
        return this.browseList.slice(0, 6);
      }
    },
  },
  data() {
    return {
      aboutPic: [
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
        {
          pic,
          text: "数据类型区分，图像，视屏，文档",
        },
      ],
      isactive: "",
    };
  },
  methods: {
    jumpBrowse(e, i, n) {
      console.log(e, i);
      this.$emit("setJumpBrowse", e, i);
      // this.getSelectItem(i);
      this.isactive = n;
    },
    jumpDownload(e, i, n) {
      console.log(e, i);
      this.$emit("setJumpBrowse", e, i);
      // this.getSelectItem(i);
      this.isactive = n;
    },
  },
};
</script>

<style lang="scss" >
//   右侧详情
.right-list {
  height: 100%;
  .top {
    margin-bottom: 10px;
    height: 50%;
    .top_title {
      color: #2a9dff;
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #034475;
      span {
        margin-left: 1.6rem;
        font-size: 12px;
        cursor: pointer;
      }
    }
    // .picBox {
    //   width: 100%;
    //   .picBox_item {
    //     width: 31%;
    //     float: left;
    //     // margin-left: 2%;
    //     .aboutPic {
    //       width: 90%;
    //       height: 60px;
    //       img {
    //         width: 100%;
    //         height: 100%;
    //       }
    //     }
    //     p {
    //       line-height: 20px;
    //       height: 80px;
    //       font-size: 12px;
    //       padding: 0.05rem;
    //       overflow: hidden;
    //       // white-space: nowrap;
    //       text-overflow: ellipsis;
    //       display: -webkit-box;
    //       -webkit-line-clamp: 4;
    //       /* autoprefixer: ignore next */
    //       -webkit-box-orient: vertical;
    //     }
    //   }
    // }
  }
  .bottom {
    margin-top: 0.05rem;
    height: 45%;
    .bottom_title {
      color: #6392bb;
      font-weight: 700;
      font-size: 0.2rem;
      margin-bottom: 10px;
      padding-bottom: 0.05rem;
      border-bottom: 1px solid #034475;
      &.bottom_title2 {
        margin-top: 0.4rem;
      }
      span {
        margin-left: 55%;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .picBox {
      width: 100%;
      display: flex;
      // justify-content: center;
      flex-wrap: wrap;
      .picBox_item {
        width: 0.96rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // float: left;
        margin: 0 1%;
        // height: 14vh;
        margin-bottom: 0.1rem;
        .hotPic {
          // width: 90%;
          margin: auto;
          height: 0.96rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          line-height: 20px;
          height: 42px;
          font-size: 12px;
          padding: 0.05rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          white-space: normal;
        }
      }
      .active {
        background: rgba($color: #4875e8, $alpha: 0.5);
      }
    }
  }
}
</style>